<template>
  <div class="popup-container">
    <!-- 标题区域 -->
    <div class="header">
      <h1>🚀 Plasmo 扩展</h1>
      <p class="subtitle">快速操作面板</p>
    </div>

    <!-- 基础消息传递 -->
    <section class="section">
      <h2>🏓 基础消息传递</h2>
      
      <div class="card">
        <h3>Ping 测试</h3>
        <button @click="sendPing" :disabled="loading.ping" class="btn btn-primary">
          {{ loading.ping ? '发送中...' : '发送 Ping' }}
        </button>
        <div v-if="responses.ping" class="response">
        <strong>响应:</strong> {{ responses.ping.data || responses.ping.error || '无响应数据' }}
      </div>
      </div>

      <div class="card">
        <h3>👤 用户数据</h3>
        <button @click="getUserData" :disabled="loading.userData" class="btn btn-info">
          {{ loading.userData ? '获取中...' : '获取用户数据' }}
        </button>
        <div v-if="responses.userData" class="response">
          <strong>用户信息:</strong>
          <pre>{{ JSON.stringify(responses.userData, null, 2) }}</pre>
        </div>
      </div>
    </section>



    <!-- 状态显示 -->
    <div class="status-bar">
      <span>🕒 最后操作: {{ lastActionTime || '无' }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { sendToBackground } from "@plasmohq/messaging"

// Chrome API 类型声明
declare const chrome: typeof globalThis.chrome

// 响应式数据
const loading = reactive({
  ping: false,
  userData: false
})

const responses = reactive({
  ping: null,
  userData: null
})



// 状态数据
const lastActionTime = ref('')

/**
 * 🏓 发送Ping消息
 */
async function sendPing() {
  loading.ping = true
  try {
    const response = await sendToBackground({
      name: "ping" as any,
      body: {
        message: "Hello from popup!"
      }
    })
    responses.ping = response
    updateLastAction('Ping 发送成功')
  } catch (error) {
    responses.ping = { error: error.message }
    updateLastAction('Ping 发送失败')
  } finally {
    loading.ping = false
  }
}

/**
 * 👤 获取用户数据
 */
async function getUserData() {
  loading.userData = true
  try {
    const response = await sendToBackground({
      name: "getUserData" as any,
      body: {
        userId: 123, // 使用数字类型的用户ID，对应后端模拟数据
        includeSettings: true
      }
    })
    responses.userData = response
    updateLastAction('用户数据获取成功')
  } catch (error) {
    responses.userData = { error: error.message }
    updateLastAction('用户数据获取失败')
  } finally {
    loading.userData = false
  }
}













/**
 * 🛠️ 工具函数
 */
function updateLastAction(action: string, success: boolean = true) {
  lastActionTime.value = new Date().toLocaleTimeString()
  
  const status = success ? '操作执行成功' : '操作执行失败'
  const statusColor = success ? '#4CAF50' : '#F44336'
  
  // 增强的控制台输出 - 更容易发现
  console.group('🎯 Plasmo Extension Action (Popup)')
  console.log(`%c${action}`, `color: ${success ? '#4CAF50' : '#F44336'}; font-weight: bold; font-size: 14px;`)
  console.log(`%c时间: ${lastActionTime.value}`, 'color: #2196F3;')
  console.log(`%c状态: ${status}`, `color: ${statusColor};`)
  console.groupEnd()
  
  // 额外的调试信息
  console.warn(`🚨 DEBUG: updateLastAction被调用 (Popup) - ${action} - ${status}`)
}

/**
 * 🚀 初始化
 */
onMounted(() => {
  updateLastAction('Popup 初始化完成')
})
</script>

<style scoped>
.popup-container {
  width: 380px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.header h1 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.subtitle {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

.section {
  margin-bottom: 20px;
}

.section h2 {
  font-size: 16px;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
}

.description {
  margin: 0 0 12px 0;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.4;
}

.btn {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: #2196F3;
  color: white;
}

.btn-info {
  background: #00BCD4;
  color: white;
}

.btn-success {
  background: #4CAF50;
  color: white;
}

.btn-warning {
  background: #FF9800;
  color: white;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-group .btn {
  margin-bottom: 0;
}

.response {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
  font-size: 12px;
}

.response pre {
  margin: 8px 0 0 0;
  white-space: pre-wrap;
  font-size: 11px;
  color: #E8F5E8;
  line-height: 1.3;
}

.status-bar {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  margin-top: 16px;
}

.status-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 滚动条样式 */
.popup-container::-webkit-scrollbar {
  width: 6px;
}

.popup-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.popup-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* 成功和错误状态样式 */
.success {
  color: #4CAF50;
  font-weight: 500;
}

.error {
  color: #F44336;
  font-weight: 500;
}

.popup-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
